<template>
    <div class="photoListContainer">
        <!-- 导航栏区域 -->
        <div class="navWra">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a  @click="toggleImgList(item.id)"
                        :class="['mui-control-item', item.id === 0 ? 'mui-active' : '']" v-for="item in catsList" :key="item.id">
                        {{ item.title }}
                    </a>
                </div>
            </div>
        </div>
        <!-- 图片列表区域 -->
        <div class="imgWra">
            <ul>
                <router-link :to="`photoInfo/${ item.id }`" v-for="item in imgList" :key="item.id" tag="li">
                    <img v-lazy="item.img_url">
                    <div class="info">
                        <h3 class="info_title">{{ item.title }}</h3>
                        <div class="info_content" v-html="item.content"></div>
                    </div>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    import mui from '../../lib/mui/js/mui.min'
    export default {
        data() {
            return {
                // 分类列表
                catsList: [],
                // 图片列表
                imgList: [],
                categoryId: 0
            }
        },
        created() {
            // 获取 图片 分类 列表
            this.getImgCategory(),
            // 获取 图片 列表
            this.getImgList()
        },
        // 当 数据 与 页面都 挂载好的时候 调用
        mounted() {
            // 初始化 scroll 滑动 效果
            mui('.mui-scroll-wrapper').scroll()
        },
        methods: {
            // 获取 图片 分类 列表
            getImgCategory() {
                // 初始化 图片 列表
                this.catsList = []
                this.$http.get('api/getimgcategory')
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        data.message.unshift({ title: '全部', id: 0 })
                        this.catsList = data.message
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            // 获取 图片 列表
            getImgList() {
                this.$http.get(`api/getimages/${ this.categoryId }`)
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        this.imgList = data.message
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            //  根据 分类 切换  图片 列表
            toggleImgList(id) {
                this.categoryId = id
                this.getImgList()
            }
        }
    }
</script>

<style scoped lang="less">
    * { touch-action: pan-y; }
    .photoListContainer {
        .imgWra {
            ul {
                padding: 10px;
                margin: 0;
                li {
                    box-shadow: 0 0 10px #999;
                    margin-bottom: 10px;
                    position: relative;
                    img[lazy=loading] {
                        width: 40px;
                        height: 300px;
                        margin: auto;
                    }
                    img {
                        vertical-align: top;
                        width: 100%;
                    }
                    .info {
                        position: absolute;
                        bottom: 0;
                        color: #fff;
                        background-color: rgba(0, 0, 0, 0.4);
                        max-height: 84px;
                        .info_title {
                            font-size: 14px;
                        }
                        .info_content {
                            font-size: 13px;
                        }
                    }
                }
                li:last-child {
                    margin: 0;
                }
            }
        }
    }
</style>